<template>
  <div>
    <Header :left="true" leftText="返回" title="新增生产异常上报详情" />

    <!-- 滑动区域，适应手机分辨率 -->
    <div class="textScroll">
      <!-- 基本信息 -->
      <van-row style="margin-top: 10px">
        <van-col>
          <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
        </van-col>
        <van-col class="message" style="margin-top: 5px">基本信息</van-col>
      </van-row>
      <div class="divMessage">
        <Field v-model="form.FactoryID" :readonly="true" size="small" class="Field" center colon label="工厂代码" />
        <Field v-model="form.MachineID" :readonly="true" size="small" class="Field" center colon label="设备代码" />
        <Field v-model="form.AbnormalTypeID" :readonly="true" size="small" class="Field" center colon label="异常类型" />
        <Field v-model="form.OccurDatetime" :readonly="true" size="small" class="Field" center colon label="异常发生时间" />
        <Field v-model="form.PShiftID" :readonly="true" size="small" class="Field" center colon label="班次" />
        <Field v-model="form.POrderID" :readonly="true" size="small" class="Field" center colon label="生产订单" />
        <Field v-model="form.MaterialID" :readonly="true" size="small" class="Field" center colon label="物料代码" />
        <Field v-model="form.MaterialName" :readonly="true" size="small" class="Field" center colon label="物料名称" />
        <Field v-model="form.AbnormalDescription" :readonly="true" size="small" class="Field" center colon
          label="异常信息描述" />
      </div>
      <!-- 机器设备异常 -->
      <van-row style="margin-top: 10px" v-if="form.AbnormalTypeID == 'AT02'">
        <van-col>
          <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
        </van-col>
        <van-col class="message" style="margin-top: 5px">机器设备异常</van-col>
      </van-row>
      <div class="divMessage" v-if="form.AbnormalTypeID == 'AT02'">
        <Field v-model="form.MachineStatus" :readonly="true" size="small" class="Field" center colon label="设备状态" />
        <Field v-model="form.QualityEffect" :readonly="true" size="small" class="Field" center colon label="对质量影响" />
        <Field v-model="form.SafeEffect" :readonly="true" size="small" class="Field" center colon label="对安全影响" />
        <Field v-model="form.AbnormalLevl" :readonly="true" size="small" class="Field" center colon label="异常等级" />
        <Field v-model="form.Memo" :readonly="true" size="small" class="Field" center colon label="异常备注信息" />
      </div>
      <!-- 工艺参数异常 -->
      <van-row style="margin-top: 10px" v-if="form.AbnormalTypeID == 'AT01'">
        <van-col>
          <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
        </van-col>
        <van-col class="message" style="margin-top: 5px">工艺参数异常</van-col>
      </van-row>
      <div class="divMessage" v-if="form.AbnormalTypeID == 'AT01'">
        <Field v-model="form.DataCollectionItemID" :readonly="true" size="small" class="Field" center colon
          label="异常参数代码" />
        <Field v-model="form.HighLevel" :readonly="true" size="small" class="Field" center colon label="参数上限标准" />
        <Field v-model="form.LowLevel" :readonly="true" size="small" class="Field" center colon label="参数下限标准" />
        <Field v-model="form.SetHigh" :readonly="true" size="small" class="Field" center colon label="参数设定上限值" />
        <Field v-model="form.SetLow" :readonly="true" size="small" class="Field" center colon label="参数设定下限值" />
        <Field v-model="form.FactValue" :readonly="true" size="small" class="Field" center colon label="参数实际值" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  Icon,
  NoticeBar,
  Button,
  Row,
  Tag,
  Checkbox,
  Pagination,
  popup,
  Loading,
  Popup,
  Panel,
  ImagePreview,
  Toast,
  tab,
  tabs,
  Divider,
  Image as VanImage,
  Field,
  CellGroup,
  Cell,
  Picker,
  Uploader,
  Dialog,
  Col,
  RadioGroup,
  Radio,
} from "vant";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient } from "@/libs/apisie";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(Picker);
Vue.use(popup);
Vue.use(Uploader);
Vue.use(Loading);
Vue.use(Field);
Vue.use(RadioGroup);
Vue.use(Radio);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
  name: "tightclosesureitem",

  components: {
    Button,
    NoticeBar,
    Header,
    ImagePreview,
    Icon,
    Row,
    tab,
    popup,
    Popup,
    tabs,
    Tag,
    VanImage,
    Toast,
    Divider,
    Field,
    CellGroup,
    Cell,
    Uploader,
    Picker,
    Dialog,
    Col,
    RadioGroup,
    Radio,
  },

  data() {
    return {
      user: [], //当前登录用户
      form: [],
      item: {},
      result: [],
    };
  },
  created: function () {
    this.user = JSON.parse(storage.get("user"));
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    this.form = api.pageParam.item;
  },
  methods: {
    // 获取当前时间
    getNowTime() {
      let dateTime;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      dateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      return dateTime;
    },
  },
};
</script>
<style>
body {
  background-color: White;
}

.pic {
  width: 100%;
  text-align: center;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}

.buttonColor {
  background-color: #ff9933;
  border-color: #ff9933;
}

.buttonColor2 {
  background-color: #1076c0;
  border-color: #1076c0;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.divStyle {
  border: 1px solid #dcdcdc;
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 5px;
  margin-right: 4px;
  margin-top: 4px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.divMedia {
  margin-top: 0px;
  height: 230px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.divMedia2 {
  margin-top: 0px;
  height: 160px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.button {
  position: fixed;
  left: 5px;
  right: 5px;
  bottom: 24px;
  width: 100%;
  height: 30px;
  font-size: 12px;
}

.divMessage {
  margin-top: 0px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.Field {
  font-weight: bold;
  font-size: 15px;
  color: #9c8e8e;
  height: 45px;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 5rem;
  bottom: 0rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  z-index: 1;
}
</style>
